
<template>
  <!-- 账簿维护/期初余额 页面-->
  <div style="overflow: auto;">
    <div class="oneTop">
      <cus-allcard style="padding-top:20px;padding-bottom:0"

                   :showTitle="false">
        <div class="topBody">
          <div class="topBodyItem">
            <span class="itemSpan">账簿年度</span> 
            <Input v-model="selectForm.year"
                   class="itemImport"
                   :disabled="true"
                   placeholder="请输入账簿年度"
                   maxlength="15"></Input>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">入账日期</span>
            <Date-picker type="date"
                         disabled
                         v-model="selectForm.dataTime"
                         :clearable="false"
                         placeholder="请选择入账日期"
                         class="itemImport"></Date-picker>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">摘要内容</span>
            <Input v-model="selectForm.abstractname"
                   class="itemImport"
                   :disabled="true"
                   placeholder="请输入摘要内容"
                   maxlength="15"></Input>
          </div>

          <div class="topBodyItem">
            <span class="itemSpan">备注信息</span>
            <Input v-model="selectForm.remark"
                   class="itemImport"
                   placeholder="请输入备注信息"
                   maxlength="15"></Input>
          </div>
          <div class="topBodyItem">
            <cus-Button type="primary"
                        :disabled="!selectForm.year"
                        class="ml_10"
                        @onClick="addModelChange"
                        v-permission="20">入账</cus-Button>
          </div>
        </div>
      </cus-allcard>
    </div>

    <cus-allcard style="margin-top:20px"
                 :showTitle="false">
      <Tabs :value="tabsValue"
            @on-click="tabsValueChange($event)"
            style="padding-top:16px;">
        <Tab-pane label="经费账科目"
                  name="nameOne">
          <cusTable border
                 :loading="form.loading"
                 :columns="columnsOne"
                 :data="dataOne"
              :bottomClass="['hint']"
                 :size="vuex_config.tableSize">
            <template slot-scope="{ row, index }"
                      slot="direction">
              <div style="padding:18px 0px;">
                <Select v-model="row.direction"
                        size="large"
                        :transfer="true"
                        style="max-width:200px"
                        placeholder=""
                        :clearable="true"
                        @on-change="directionOne(index,row.direction)">
                  <Option :value="0">收</Option>
                  <Option :value="1">付</Option>
                </Select>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="recMoney">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.recMoney"
                              v-if="row.direction!=1"
                              :min="0"
                              :max="999999999"
                              style="width:100%;"
                              @on-change="recMoneyOne(index,row.recMoney)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==1">{{row.recMoney}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="payMoney">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.payMoney"
                              v-if="row.direction!=0"
                              :min="0"
                              :max="999999999"
                              style="width:100%"
                              @on-change="payMoneyOne(index,row.payMoney)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==0">{{row.payMoney}}</span>
              </div>
            </template>
          </cusTable>
          <div style="color: red; margin-top: 10px; font-size: 14px;">温馨提示：不需要添加期初余额的科目，收付方向、余额置空即可。</div>
        </Tab-pane>
        <Tab-pane label="粮秣账科目"
                  name="nameTwo">
          <cusTable border
                 :loading="form.loading"
                 :columns="columnsTwo"
                 :data="dataTwo"
                 :bottomClass="['hint']"
                 :size="vuex_config.tableSize">
            <template slot-scope="{ row, index }"
                      slot="direction">
              <div style="padding:18px 0px;">
                <Select v-model="row.direction"
                        size="large"
                        :transfer="true"
                        placeholder=""
                        style="max-width:200px"
                        :clearable="true"
                        @on-change="directionTwo(index,row.direction)">
                  <Option :value="0">收</Option>
                  <Option :value="1">付</Option>
                </Select>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="recrice">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.recrice"
                              v-if="row.direction!=1"
                              :min="0"
                              style="width:100%"
                              @on-change="recriceTwo(index,row.recrice)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==1">{{row.recrice}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="recflour">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.recflour"
                              v-if="row.direction!=1"
                              :min="0"
                              style="width:100%"
                              @on-change="recflourTwo(index,row.recflour)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==1">{{row.recflour}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="recoil">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.recoil"
                              v-if="row.direction!=1"
                              :min="0"
                              style="width:100%"
                              @on-change="recoilTwo(index,row.recoil)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==1">{{row.recoil}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="recbean">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.recbean"
                              v-if="row.direction!=1"
                              :min="0"
                              style="width:100%"
                              @on-change="recbeanTwo(index,row.recbean)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==1">{{row.recbean}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="payrice">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.payrice"
                              v-if="row.direction!=0"
                              :min="0"
                              style="width:100%"
                              @on-change="payriceTwo(index,row.payrice)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==0">{{row.payrice}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="payflour">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.payflour"
                              v-if="row.direction!=0"
                              :min="0"
                              style="width:100%"
                              @on-change="payflourTwo(index,row.payflour)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==0">{{row.payflour}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="payoil">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.payoil"
                              v-if="row.direction!=0"
                              :min="0"
                              style="width:100%"
                              @on-change="payoilTwo(index,row.payoil)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==0">{{row.payoil}}</span>
              </div>
            </template>
            <template slot-scope="{ row, index }"
                      slot="paybean">
              <div class="tableInput"
                   style="padding:18px 0px;">
                <Input-number v-model="row.paybean"
                              v-if="row.direction!=0"
                              :min="0"
                              style="width:100%"
                              @on-change="paybeanTwo(index,row.paybean)"
                              placeholder="输入金额"></Input-number>
                <span v-if="row.direction==0">{{row.paybean}}</span>
              </div>
            </template>
          </cusTable>
          <div class="hint" style="color: red; margin-top: 10px; font-size: 14px;">温馨提示：不需要添加期初余额的科目，收付方向、余额置空即可。</div>
        </Tab-pane>
      </Tabs>

    </cus-allcard>
  </div>
</template>
<script>
import {
  getAccountBook,
  getSubByIdToBaseBalance,
  addBaseBalance
} from '@/api/businessAccountingApi/essentialInformationApi'
export default {
  data () {
    return {
      superiorState: false,
      tabsValue: 'nameOne',
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
      // 查询条件的集合
      selectForm: {
        year: null, // 账簿时间
        accountbookId: null, // 账簿id
        dataTime: null, // 入账日期
        abstractname: '上年转入', // 摘要内容
        remark: '', // 备注信息
      },
      dataOne: [], // 经费账-表格列表
      // 经费账-表头
      columnsOne: [
        {
          title: '科目名称',
          key: 'subjectfullname',
          align: 'center',
          minWidth: 180
        },
        {
          title: '收(付)',
          slot: 'direction',
          align: 'center',
          minWidth: 80
        },
        {
          title: '收方金额(元)',
          slot: 'recMoney',
          align: 'center',
          minWidth: 120
        },
        {
          title: '付方金额(元)',
          slot: 'payMoney',
          align: 'center',
          minWidth: 120
        },
      ],
      // 粮秣表格每次添加的初始模板
      dataTwoItem: {
        subjectId: null, // 科目id
        subjectCode: null, // 科目编码
        subjectName: null, // 科目名称
        subjectFullName: null, //科目名称
        direction: null, // 收付(0-收，1-付)
        recrice: 0, // 收方大米重量（千克）粮秣账必传
        recflour: 0, // 收方小麦粉（千克） 粮秣账必传
        recoil: 0, // 收方石油（千克） 粮秣账必传
        recbean: 0, // 收付大豆（千克） 粮秣账必传
        payrice: 0, // 付方大米重量（千克） 粮秣账必传
        payflour: 0, // 付方小麦粉（千克） 粮秣账必传
        payoil: 0, // 付方石油（千克） 粮秣账必传
        paybean: 0 // 付方大豆（千克） 粮秣账必传
      },
      dataTwo: [], // 粮秣账-表格列表
      // 粮秣账-表头
      columnsTwo: [
        {
          title: '科目名称',
          key: 'subjectfullname',
          align: 'center',
          minWidth: 180
        },
        {
          title: '收(付)',
          slot: 'direction',
          align: 'center',
          minWidth: 100
        },
        {
          title: '收方(大米)',
          slot: 'recrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '收方(小麦粉)',
          slot: 'recflour',
          align: 'center',
          minWidth: 120
        },
        {
          title: '收方(食油)',
          slot: 'recoil',
          align: 'center',
          minWidth: 120
        },
        {
          title: '收方(大豆)',
          slot: 'recbean',
          align: 'center',
          minWidth: 120
        },
        {
          title: '付方(大米)',
          slot: 'payrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '付方(小麦粉)',
          slot: 'payflour',
          align: 'center',
          minWidth: 120
        },
        {
          title: '付方(食油)',
          slot: 'payoil',
          align: 'center',
          minWidth: 120
        },
        {
          title: '付方(大豆)',
          slot: 'paybean',
          align: 'center',
          minWidth: 120
        }
      ],
    }
  },
  mounted () {

    this.selectForm.dataTime = new Date().Format('yyyy') + '01-01'//入账日期默认传当年1月1日
    this.getAccountBookApi() // 查询活动账簿 接口
    // 函数时提示变成3秒消失
    this.$Message.config({
      top: 50,
      duration: 3
    })
  },
  // 销毁函数时提示变回1.5秒消失
  beforeDestroy () {
    this.$Message.config({
      top: 50,
      duration: 1.5
    })
  },

  activated () {
    if (this.$route.query.superior == 'home') {
      this.superiorState = true
    } else {
      this.superiorState = false
    }
  },
  methods: {

    // 查询活动账簿 接口
    getAccountBookApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        getAccountBook({
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.selectForm.year = res.basAccountbook.year // 账簿年度-回显使用
            this.selectForm.accountbookId = res.basAccountbook.accountbookId // 账簿id
            this.getSubByIdToBaseBalanceApi() // 期初余额页面接口
            resolve()
          } else {
            // this.$Message.error(res.resultmsg)
          }
        })
      })
    },

    // 期初余额页面 接口
    getSubByIdToBaseBalanceApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        getSubByIdToBaseBalance({
          accountBookId: this.selectForm.accountbookId // 账簿id
        }).then((res) => {
          this.form.loading = false
          if (res.retCode === 0) {
            res.jFSub.forEach(element => { //默认后面数据为null
              element.type = 0
              element.direction = null
              element.subjectCode = element.subjectcode
              element.subjectFullName = element.subjectfullname
              element.subjectName = element.subjectname
              element.recMoney = null
              element.payMoney = null
            })
            this.dataOne = res.jFSub
            res.lMSub.forEach(element => { //默认后面数据为null
              element.type = 1
              element.direction = null
              element.subjectCode = element.subjectcode
              element.subjectFullName = element.subjectfullname
              element.subjectName = element.subjectname
              element.recrice = null
              element.recflour = null
              element.recoil = null
              element.recbean = null
              element.payflour = null
              element.payrice = null
              element.payoil = null
              element.paybean = null
            })
            this.dataTwo = res.lMSub;
            resolve();
          } else {
            this.$Message.error(res.retMsg)
          }
        })
      })
    },
    // tabs标签页改变回调
    tabsValueChange (value) {
      if (value === 'nameOne') { // 经费账录入
      } else { // 粮秣账录入
      }
    },
    // 入账按钮-经费账
    addModelChange () {
      console.log('one', this.dataOne)
      console.log('two', this.dataTwo)
      if (!this.selectForm.abstractname) {
        this.$Message.info('摘要内容不能为空')
        return
      }
      var subjectDtoList = []
      this.dataOne.forEach(element => {
        subjectDtoList.push(element)
      })
      this.dataTwo.forEach(element => {
        subjectDtoList.push(element)
      })
      var valueData = {
        accountbookId: this.selectForm.accountbookId, // 账簿id
        certificateDate: new Date(this.selectForm.dataTime).Format('yyyy-MM-dd'), // 入账日期  YYYY-mm-DD
        abstractName: this.selectForm.abstractname, // 摘要内容
        department: '', // 部门.比如一连队
        operatorname: this.vuex_user.base.name, // 登陆人姓名
        operatorid: this.vuex_user.base.id, // 用户id//登陆人Id
        certificatetype: 0, // 凭证类型0-普通，1-结转下年，2-上年转入
        remark: this.selectForm.remark, // 备注
        subjectDtoList: subjectDtoList
      }
      this.form.loading = true
      return new Promise((resolve) => {
        addBaseBalance(valueData).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.$Message.success(res.resultmsg)
            this.dataOne = []
            this.dataTwo = []
            this.selectForm.abstractname = ''
            this.selectForm.remark = ''
            this.getAccountBookApi() // 查询活动账簿 接口
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 表格科目方向改变回调-经费账
    directionOne (index, value) {
      this.dataOne[index].direction = value
      this.dataOne[index].recMoney = 0
      this.dataOne[index].payMoney = 0
    },
    // 收方金额(元)改变回调-经费账
    recMoneyOne (index, value) {
      this.dataOne[index].recMoney = value
    },
    // 收方金额(元)改变回调-经费账
    payMoneyOne (index, value) {
      this.dataOne[index].payMoney = value
    },

    // 表格科目方向改变回调-粮秣账
    directionTwo (index, value) {
      this.dataTwo[index].direction = value
      this.dataTwo[index].recrice = 0
      this.dataTwo[index].recflour = 0
      this.dataTwo[index].recoil = 0
      this.dataTwo[index].recbean = 0
      this.dataTwo[index].payrice = 0
      this.dataTwo[index].payflour = 0
      this.dataTwo[index].payoil = 0
      this.dataTwo[index].paybean = 0
    },
    // 收方(大米)改变回调-粮秣账
    recriceTwo (index, value) {
      this.dataTwo[index].recrice = value
    },
    // 收方(小麦粉)改变回调-粮秣账
    recflourTwo (index, value) {
      this.dataTwo[index].recflour = value
    },
    // 收方(食油)改变回调-粮秣账
    recoilTwo (index, value) {
      this.dataTwo[index].recoil = value
    },
    // 收方(大豆)改变回调-粮秣账
    recbeanTwo (index, value) {
      this.dataTwo[index].recbean = value
    },
    // 付方(大米)改变回调-粮秣账
    payriceTwo (index, value) {
      this.dataTwo[index].payrice = value
    },
    // 付方(小麦粉)改变回调-粮秣账
    payflourTwo (index, value) {
      this.dataTwo[index].payflour = value
    },
    // 付方(食油)改变回调-粮秣账
    payoilTwo (index, value) {
      this.dataTwo[index].payoil = value
    },
    // 付方(大豆)改变回调-粮秣账
    paybeanTwo (index, value) {
      this.dataTwo[index].paybean = value
    },
  }
}
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    display: flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 20px;
    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }
    .itemImport {
      width: 200px;
    }
  }
}
// 图表上方tabs标签样式
// 当我们需要覆盖element-ui中的样式时只能通过深度作用选择器-样式穿透
::v-deep .tableInput {
  .ivu-input-number {
    .ivu-input-number-input-wrap {
      .ivu-input-number-input {
        text-align: right;
        padding-right: 26px;
      }
    }
  }
}
</style>
